<template>
    <div id="seachDialog">
      <a-modal
        title="修改密码"
        v-model="passwordData.show"
        width="450px"
        style="overflow:hidden"
        @cancel="handleClose">
        <el-row style="padding:30px 40px">
            <el-col :span="24">
                <el-form :model="parames" size="small" :rules="rules" label-position="left" ref="parames" label-width="94px">
                    <el-form-item label="原始密码:" prop="password">
                        <el-input size="small" type="password" v-model="parames.password" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码:" prop="newPassword">
                        <el-input size="small" type="password" v-model="parames.newPassword" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码:" prop="newAgainPassword" class="is-required">
                        <el-input size="small" type="password" v-model="parames.newAgainPassword" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="handleSend">保存</el-button>
            <el-button size="small" @click="handleClose">取消</el-button>
        </span>
      </a-modal>
    </div>
</template>

<script>
export default {
    props: ['passwordData'],
    data() {
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.parames.newPassword) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
          parames: {
              userId: '',
              password: '',
              newPassword: '',
              newAgainPassword: ''
          },
          rules: {
            password: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            newPassword: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            newAgainPassword: [{ validator: validatePass2, trigger: ['change','blur' ]}],
          },
        };
    },
    methods: {
        handleClose () {
            this.passwordData.show = false
        },
        handleSend () {//提交
            this.$refs['parames'].validate((valid) => {
                if (valid) {
                    this.$post(this.$api.postProviderPersonelUpdatePassword,{
                        userId: this.passwordData.userId,
                        password: this.parames.password,
                        newPassword: this.parames.newPassword
                    }).then(response => {
                        if (response.data.succeed) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.handleClose()
                        }
                    })
                }       
            })
        },
        resetData () {
            this.parames.userId = ''
            this.parames.password = ''
            this.parames.newPassword = ''
            this.parames.newAgainPassword = ''
            this.$refs.parames.resetFields()
        }
    },
    computed: {
      changeDialog () {
        return this.passwordData.show
      }
    }, 
    watch: {
      changeDialog: {
        handler (curVal, oldVal) {
          if (curVal) {
            
          } else {
            this.resetData()
          }
        }
      }
    }
};
</script>

<style>
#seachDialog .el-dialog{
    padding-bottom: 0; 
    overflow-x: hidden;
}
#seachDialog .el-dialog__footer{
    border-top: #f4f4f4 solid 1px;
}
.title-row:hover{
  background: #f9f9f9;
}
</style>
